<template>
  <div class="freightManage">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button type="primary" style="background-color: #e15536;border: none;" @click="addFreight">新增模板</el-button>
          </div>
          <el-table
            :header-cell-style="{ background: '#F7FBFE', color: '#000' }"
            :data="freightManageTableData"
            stripe
            style="width: 100%;border: solid 1px #f5f5f5;"
          >
            <el-table-column
              prop="templateType"
              label="模板类型"
            >
              <template v-slot="templateTypeRow">
                {{ templateTypeObj[templateTypeRow.row.templateType] }}
              </template>
            </el-table-column>
            <el-table-column
              prop="transportType"
              label="运输类型"
            >
              <template v-slot="transportTypeRow">
                {{ transportTypeRow.row.transportType === 1 ? "普快" : "特快" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="associatedCityList"
              label="关联城市"
            >
              <template v-slot="{row}">
                {{ getAssociatedCityNames(row.associatedCityList).join(',') }}
              </template>
            </el-table-column>
            <el-table-column
              prop="firstWeight"
              label="首重"
            />
            <el-table-column
              prop="continuousWeight"
              label="续重"
            />
            <el-table-column
              prop="lightThrowingCoefficient"
              label="轻抛系数"
            />
            <el-table-column
              label="操作"
              width="150"
            >
              <template v-slot="{row}">
                <el-button type="text" @click="editFreight(row)">编辑</el-button>
                <span style="margin:0 10px;color:#ccc">|</span>
                <el-button type="text" @click="delCarriages(row.id)">删除</el-button>
              </template>
            </el-table-column>

          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <add-freight v-if="showDialog" ref="addFreight" :freight-id="freightId" :title="title" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import { getCarriagesApi } from '@/api/freightManage'
import AddFreight from './components/add-freight.vue'
export default {
  components: {
    AddFreight
  },
  data() {
    return {
      freightId: 1,
      title: '新增模板',
      showDialog: false,
      freightManageTableData: [],
      // 模板类型
      templateTypeObj: {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省'
      },
      // 关联城市
      associatedCityListObj: {
        1: '全国',
        2: '京津冀',
        3: '江浙沪',
        4: '川渝',
        5: '黑吉辽'
      }
    }
  },
  created() {
    this.getfreightManageTableData()
  },
  methods: {
    getAssociatedCityNames(cityIds) {
      if (!Array.isArray(cityIds)) {
        return []
      }
      return cityIds.map(v => this.associatedCityListObj[v])
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      }
      return ''
    },
    // 运费模板列表
    async getfreightManageTableData() {
      const { data } = await getCarriagesApi()
      // console.log(data)
      this.freightManageTableData = data
    },
    // 删除模板
    async delCarriages(id) {
      await this.$confirm('是否删除该模板?')
      // await delCarriagesApi(id)
      this.$message.success('删除成功')
      this.$message.error('演示数据不允许删除')
      // this.getfreightManageTableData()
    },
    // 新增
    addFreight() {
      this.showDialog = true
      this.title = '新增楼宇'
    },
    // 编辑
    async editFreight(row) {
      // this.freightId = id
      this.showDialog = true
      this.title = '编辑楼宇'
      // 通过ref直接调用子组件的方法
      row.transportType = '普快'
      row.associatedCityList = '全国'
      row.templateType = this.templateTypeObj[row.templateType]
      this.$nextTick(() => this.$refs.addFreight.editFreight(row))
    }
  }
}
</script>

<style scoped>
.freightManage{
  margin:0 20px;

}

</style>
